<template>
  <div class="sectionTab">
    <div class="sectionTab-header van-hairline--bottom">
      <div class="sectionTab-title">热门城市</div>
      <div class="sectionTab-tab">
        <van-button
          @click="handleHotCityTab(index)"
          v-for="(item, index) in hotCity"
          :key="index"
          class="tab-item"
          type="default"
          size="small"
          :class="{ active: index == active }"
          >{{ item }}</van-button
        >
      </div>
    </div>
    <div class="section-article">
      <div
        class="article-item"
        v-for="item in articleItem.slice(0, articleItemNumber)"
        :key="item.id"
      >
        <img class="article-item-img" :src="item.imgSrc" alt />
        <div class="article-item-content">
          <p class="article-item-title">{{ item.title }}</p>
          <span class="article-item-describe">{{ item.describe }}</span>
          <span class="article-item-price">{{ item.price }}</span>
        </div>
      </div>
    </div>
    <van-button @click="handleGetterChange" class="more-property" type="default"
      >更多房源信息...</van-button
    >
  </div>
</template>

<script>
export default {
  name: "SectionTab",
  data() {
    return {
      hotCity: ["北京", "上海", "广州", "深圳"],
      active: 0,
      articleItemNumber: 4,
      articleItem: [
        {
          id: 1,
          imgSrc:
            "https://img.meituan.net/phoenix/8c97634c18f297a0c0077efdc4a0aeff436747.jpg.webp@346w_224h_60q_1e|346_224m",
          title:
            "深圳北站落地窗高端公寓，欧式清新风，近地铁，近福田口岸，会展中心，环境非常好 24小时入住，大床房，适合情侣",
          describe: "整套·1居室 · 可住2人",
          price: "￥158"
        },
        {
          id: 2,
          imgSrc:
            "https://p0.meituan.net/iphoenix/2a36fe37dcf9f5d54565998873db50a47454758.jpg.webp@346w_224h_60q_1e|346_224m",
          title:
            "深圳北站落地窗高端公寓，欧式清新风，近地铁，近福田口岸，会展中心，环境非常好 24小时入住，大床房，适合情侣",
          describe: "整套·1居室 · 可住2人",
          price: "￥158"
        },
        {
          id: 3,
          imgSrc:
            "https://img.meituan.net/iphoenix/331985dac0990ac55221b42725edfacf3540416.png.webp@346w_224h_60q_1e|346_224m",
          title:
            "深圳北站落地窗高端公寓，欧式清新风，近地铁，近福田口岸，会展中心，环境非常好 24小时入住，大床房，适合情侣",
          describe: "整套·1居室 · 可住2人",
          price: "￥158"
        },
        {
          id: 4,
          imgSrc:
            "https://p1.meituan.net/iphoenix/379adf5d85716ad673499bc0c4624041716419.jpg.webp@346w_224h_60q_1e|346_224m",
          title:
            "深圳北站落地窗高端公寓，欧式清新风，近地铁，近福田口岸，会展中心，环境非常好 24小时入住，大床房，适合情侣",
          describe: "整套·1居室 · 可住2人",
          price: "￥158"
        },
        {
          id: 5,
          imgSrc:
            "https://p1.meituan.net/iphoenix/379adf5d85716ad673499bc0c4624041716419.jpg.webp@346w_224h_60q_1e|346_224m",
          title:
            "深圳北站落地窗高端公寓，欧式清新风，近地铁，近福田口岸，会展中心，环境非常好 24小时入住，大床房，适合情侣",
          describe: "整套·1居室 · 可住2人",
          price: "￥158"
        },
        {
          id: 6,
          imgSrc:
            "https://p1.meituan.net/iphoenix/379adf5d85716ad673499bc0c4624041716419.jpg.webp@346w_224h_60q_1e|346_224m",
          title:
            "深圳北站落地窗高端公寓，欧式清新风，近地铁，近福田口岸，会展中心，环境非常好 24小时入住，大床房，适合情侣",
          describe: "整套·1居室 · 可住2人",
          price: "￥158"
        }
      ]
    };
  },
  methods: {
    handleHotCityTab(index) {
      this.active = index;
    },
    handleGetterChange() {
      this.articleItemNumber = this.articleItemNumber + 2;
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl';

.active {
  border: 1px solid #07c160;
  color: #07c160;
}

.sectionTab {
  font-size: 0.46rem;
  margin: $homeCity;
  margin-top: 0.5rem;

  .sectionTab-header {
    padding-bottom: 0.3rem;

    .sectionTab-title {
      margin-bottom: 0.2rem;
    }

    .sectionTab-tab {
      display: flex;

      .tab-item {
        margin-right: 0.2rem;
      }
    }
  }

  .section-article {
    margin-top: 0.3rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .article-item {
      width: 4.3rem;

      .article-item-img {
        border-radius: 5%;
        width: 100%;
      }

      .article-item-content {
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;

        .article-item-title {
          line-height: 0.6rem;
          font-size: 0.41rem;
          padding-right: 0.3rem;
          ellipsis();
        }

        .article-item-describe {
          line-height: 0.6rem;
          display: block;
          font-size: 0.293rem;
        }
      }
    }
  }

  .more-property {
    display: block;
    margin: 0 auto;
    border: 1px solid #07c160;
    color: #07c160;
    border-radius: 15px;
  }
}
</style>
